<script setup>
import Codemirror from "codemirror-editor-vue3";
import "codemirror/mode/clike/clike";
import "codemirror/mode/javascript/javascript";
import { defineExpose, reactive, ref } from 'vue';

const props = defineProps({
  isDrawerOpen: {
    type: Boolean,
    required: true,
  },
  operType: {
    type: Number,
    required: true,
    default: 0,
  },
  currRow: Object,
  nodeData: Object,
})

const emits = defineEmits([
  'update:isDrawerOpen',
  'addData',
  'updateData',
  'setNodeProp',
  'resizableHandle',
])

const operType = ref(props.operType)
const nodeData = ref(props.nodeData)
const currRow = ref(props.operType == 2 ? (props.nodeData == null ? {} : props.nodeData.properties) : props.currRow)
const row = currRow.value
const isFormValid = ref(false)
const refForm = ref()
const title = ref(operType.value == 0 ? '新增组件':(operType.value == 1 ?'更新组件':"属性设置"))

const cmpDataHint = ref("JSON数据格式："+ JSON.stringify({ "name": "jack" }))

// 代码编辑器
const cmRef = ref()

const cmOptions = {
  mode: "text/x-java",
}

const onChange = (val, cm) => {
  //console.log(val, cm.getValue())
}

const onInput = val => {
  //console.log(val)
}

const onReady = cm => {
  //console.log(cm.focus())
}

onUnmounted(() => {
  cmRef.value?.destroy()
})

// 表单数据
const id = ref(row.id || '')
const componentId = ref(row.componentId || '')
const componentName = ref(row.componentName || '')
const type = ref(row.type || '')
const script = ref(row.script || '')
const language = ref(row.language || 'java')
const clazz = ref(row.clazz || '')
const fallbackId = ref(row.fallbackId || '')
const cmpPre = ref(row.cmpPre || '')
const cmpFinallyOpt = ref(row.cmpFinallyOpt || '')
const cmpId = ref(row.cmpId || '')
const cmpTag = ref(row.cmpTag || '')
const cmpMaxWaitSeconds = ref(row.cmpMaxWaitSeconds || '')
const cmpTos = ref(row.cmpTos || [])
const cmpDefaultOpt = ref(row.cmpDefaultOpt || '')
const cmpTrueOpt = ref(row.cmpTrueOpt || '')
const cmpFalseOpt = ref(row.cmpFalseOpt || '')
const cmpParallel = ref(row.cmpParallel || '')
const cmpDoOpt = ref(row.cmpDoOpt || '')
const cmpBreakOpt = ref(row.cmpBreakOpt || '')
const cmpDataName = ref(row.cmpDataName || '')
const cmpData = ref(row.cmpData || '')

const clazzShow = ref(false)
const fallbackIdShow = ref(false)
const scriptShow =  ref(false)
const languageShow =  ref(false)
const cmpPreShow = ref(false)
const cmpFinallyOptShow = ref(false)
const cmpIdShow = ref(false)
const cmpTagShow = ref(false)
const cmpMaxWaitSecondsShow = ref(false)
const cmpTosShow = ref(false)
const cmpDefaultOptShow = ref(false)
const cmpTrueOptShow = ref(false)
const cmpFalseOptShow = ref(false)
const cmpParallelShow = ref(false)
const cmpDoOptShow = ref(false)
const cmpBreakOptShow = ref(false)
const cmpDataNameShow = ref(false)
const cmpDataShow = ref(false)

const paramType = ref(0)

const paramList = [
  { title: "固定参数", value: 0 },
  { title: "通过HTTP请求获取参数", value: 1 },
  { title: "通过SQL获取参数", value: 2 },
]

// 👉 drawer close
const closeNavigationDrawer = () => {
  emits('update:isDrawerOpen', false)
  emits('resizableHandle', false)
  defaultStyles()
  nextTick(() => {
    refForm.value?.reset()
    refForm.value?.resetValidation()
  })
}

const onSubmit = () => {
  refForm.value?.validate().then(({ valid }) => {
    if (valid) {
      const data = {
        id: id.value,
        componentId: componentId.value,
        componentName: componentName.value,
        type: type.value,
        script: script.value,
        language: language.value,
        clazz: clazz.value,
        fallbackId: fallbackId.value,
        cmpPre: cmpPre.value,
        cmpFinallyOpt: cmpFinallyOpt.value,
        cmpId: cmpId.value,
        cmpTag: cmpTag.value,
        cmpMaxWaitSeconds: cmpMaxWaitSeconds.value,
        cmpTos: cmpTos.value,
        cmpDefaultOpt: cmpDefaultOpt.value,
        cmpTrueOpt: cmpTrueOpt.value,
        cmpFalseOpt: cmpFalseOpt.value,
        cmpParallel: cmpParallel.value,
        cmpDoOpt: cmpDoOpt.value,
        cmpBreakOpt: cmpBreakOpt.value,
        cmpData: cmpData.value,
        cmpDataName: cmpDataName.value,
      }

      
      if(operType.value == 0){
        emits('addData', data)
      }else if(operType.value == 1){
        emits('updateData', data)
      }
      emits('update:isDrawerOpen', false)
      
      nextTick(() => {
        refForm.value?.reset()
        refForm.value?.resetValidation()
      })
    }
  })
}



const handleDrawerModelValueUpdate = val => {
  emits('update:isDrawerOpen', val)
  emits('resizableHandle', true)
  defaultStyles()
}

const cmpItems = reactive([])

const cmpItemsSelect = async () => {
  const res = await $ivyApi.post(API_URLS.lfCmpList,{
    type: type.value,
  })

  // if(showFallbackSetting.value){
  //   fallbackCommonItems.push(...res.data.common)
  //   fallbackSwitchItems.push(...res.data.switch)
  //   fallbackIfItems.push(...res.data.if)
  //   fallbackForItems.push(...res.data.for)
  //   fallbackWhileItems.push(...res.data.while)
  //   fallbackBreakItems.push(...res.data.break)
  //   fallbackIteratorItems.push(...res.data.iterator)
  // }else{
    cmpItems.push(...res.data)
  // }
}

watch(id, val => { 
  if(type.value == 'NodePreComponent' || type.value == 'NodeFinallyComponent'){
    emits('setNodeProp', { "ids": val })
    
    return
  }
  if(val){
    for (const item of cmpItems) {
      if(item.id == val){
        componentId.value = item.componentId
        componentName.value = item.componentName
        type.value = item.type
        script.value = item.script
        language.value = item.language
        clazz.value = item.clazz
        fallbackId.value = item.fallbackId
        cmpPre.value = item.cmpPre
        cmpFinallyOpt.value = item.cmpFinallyOpt
        cmpId.value = item.cmpId
        cmpTag.value = item.cmpTag
        cmpMaxWaitSeconds.value = item.cmpMaxWaitSeconds
        cmpTos.value = item.cmpTos
        cmpDefaultOpt.value = item.cmpDefaultOpt
        cmpTrueOpt.value = item.cmpTrueOpt
        cmpFalseOpt.value = item.cmpFalseOpt
        cmpParallel.value = item.cmpParallel
        cmpDoOpt.value = item.cmpDoOpt
        cmpBreakOpt.value = item.cmpBreakOpt
        cmpDataName.value = item.cmpDataName
        cmpData.value = item.cmpData
        changeType(item.type)
      }
    }
  }else{
    componentId.value = ''
    componentName.value = ''
    type.value = ''
    script.value = ''
    language.value = ''
    clazz.value = ''
    fallbackId.value = ''
    cmpPre.value = ''
    cmpFinallyOpt.value = ''
    cmpId.value = ''
    cmpTag.value = ''
    cmpMaxWaitSeconds.value = ''
    cmpTos.value = []
    cmpDefaultOpt.value = ''
    cmpTrueOpt.value = ''
    cmpFalseOpt.value = ''
    cmpParallel.value = 'false'
    cmpDoOpt.value = ''
    cmpBreakOpt.value = ''
    cmpDataName.value = ''
    cmpData.value = ''
  }
  emits('setNodeProp', { "id": val })
})

watch(componentId, val => {emits('setNodeProp', { "componentId": val })})
watch(componentName, val => { emits('setNodeProp', { "componentName": val })})
watch(type, val => { changeType(val);clazzSelect(val) })
watch(script, val => { emits('setNodeProp', { "script": val })})
watch(language, val => { emits('setNodeProp', { "language": val })})
watch(clazz, val => { emits('setNodeProp', { "clazz": val })})
watch(fallbackId, val => { emits('setNodeProp', { "fallbackId": val })})
watch(cmpPre, val => { emits('setNodeProp', { "cmpPre": val })})
watch(cmpFinallyOpt, val => { emits('setNodeProp', { "cmpFinallyOpt": val })})
watch(cmpId, val => { emits('setNodeProp', { "cmpId": val })})
watch(cmpTag, val => { emits('setNodeProp', { "cmpTag": val })})
watch(cmpMaxWaitSeconds, val => { emits('setNodeProp', { "cmpMaxWaitSeconds": val })})
watch(cmpTos, val => { 
  emits('setNodeProp', { "cmpTos": val,"cmpTo": val.join(',') })
})
watch(cmpDefaultOpt, val => { emits('setNodeProp', { "cmpDefaultOpt": val })})
watch(cmpTrueOpt, val => { emits('setNodeProp', { "cmpTrueOpt": val })})
watch(cmpFalseOpt, val => { emits('setNodeProp', { "cmpFalseOpt": val })})
watch(cmpParallel, val => { emits('setNodeProp', { "cmpParallel": val })})
watch(cmpDoOpt, val => { emits('setNodeProp', { "cmpDoOpt": val })})
watch(cmpBreakOpt, val => { emits('setNodeProp', { "cmpBreakOpt": val })})
watch(cmpDataName, val => { emits('setNodeProp', { "cmpDataName": val })})
watch(cmpData, val => { emits('setNodeProp', { "cmpData": val })})


// 初始化下拉框数据
onMounted(() => {
  defaultStyles()
  changeType(row.type)
  clazzSelect(row.type)
  nodeTypeSelect()
  scriptTypeSelect()
  fallbackListSelect()
  cmpSelect()
  cmpItemsSelect()

  setTimeout(() => {
    cmRef.value?.refresh()
  }, 100)
})

const clazzList = reactive([])

const clazzSelect = async (val) => {
  clazzList.length = 0
  const res = await $ivyApi.post(API_URLS.lfCmpOptions,{type: val})
  clazzList.push(...res.data)
}

const cmpList = reactive([])

const cmpSelect = async () => {
  cmpList.length = 0
  const res = await $ivyApi.post(API_URLS.lfCmpCmpOptions,{})
  cmpList.push(...res.data)
}

const nodeTypeList = reactive([])

const nodeTypeSelect = async () => {
  const res = await $ivyApi.post(API_URLS.lfCmpTypeOptions,{})
  nodeTypeList.push(...res.data)
}

const scriptTypeList = reactive([])

const scriptTypeSelect = async () => {
  const res = await $ivyApi.post(API_URLS.lfCmpScriptOptions,{})
  scriptTypeList.push(...res.data)
}

const fallbackList = reactive([])

const fallbackListSelect = async () => {
  const res = await $ivyApi.post(API_URLS.lfCmpFallbackList,{type: 'fallback'})
  fallbackList.push(...res.data)
}

// 组件类型切换
watch(type, val => {
  changeType(val)
  clazzSelect(val)
})

const shows = [
  clazzShow,
  fallbackIdShow,
  scriptShow,
  languageShow,
  cmpPreShow,
  cmpFinallyOptShow,
  cmpIdShow,
  cmpTagShow,
  cmpMaxWaitSecondsShow, 
  cmpTosShow,
  cmpDefaultOptShow,
  cmpTrueOptShow,
  cmpFalseOptShow,
  cmpParallelShow,
  cmpDoOptShow,
  cmpBreakOptShow, 
  cmpDataNameShow,
  cmpDataShow,
]

const showsGD = [cmpIdShow, cmpTagShow, cmpMaxWaitSecondsShow, cmpDataNameShow, cmpDataShow]

const changeType = val => {
  if (val == 'common'){
    changeTypes(showsGD, [clazzShow, cmpPreShow, cmpFinallyOptShow])
  }else if(val == 'switch'){
    changeTypes(showsGD, [clazzShow, cmpPreShow, cmpFinallyOptShow, cmpTosShow, cmpDefaultOptShow])
  }else if(val == 'if'){
    changeTypes(showsGD, [clazzShow, cmpPreShow, cmpFinallyOptShow, cmpTrueOptShow, cmpFalseOptShow])
  }else if(val == 'break'){
    changeTypes(showsGD, [clazzShow, cmpPreShow, cmpFinallyOptShow])
  }else if(val == 'for' || val == 'while'){
    changeTypes(showsGD, [clazzShow, cmpPreShow, cmpFinallyOptShow, cmpParallelShow, cmpDoOptShow, cmpBreakOptShow])
  }else if(val == 'iterator'){
    changeTypes(showsGD, [clazzShow, cmpPreShow, cmpFinallyOptShow, cmpParallelShow, cmpDoOptShow])
  }else if(val == 'fallback'){
    changeTypes([clazzShow, fallbackIdShow], [])
  }else if(val == 'script'){
    changeTypes(showsGD, [scriptShow, languageShow])
  }else if(val == 'switch_script'){
    changeTypes(showsGD, [scriptShow, languageShow, cmpTosShow, cmpDefaultOptShow])
  }else if(val == 'if_script'){
    changeTypes(showsGD, [scriptShow, languageShow, cmpTrueOptShow, cmpFalseOptShow])
  }else if(val == 'for_script' || val == 'while_script'){
    changeTypes(showsGD, [scriptShow, languageShow, cmpParallelShow, cmpDoOptShow, cmpBreakOptShow])
  }else if(val == 'break_script'){
    changeTypes(showsGD, [scriptShow, languageShow])
  }

  if(operType.value == 2){
    emits('setNodeProp', { "type": val })
  }
}

const changeTypes = (showsGD, vals) => {
  const mergedArray = [...showsGD, ...vals]

  shows.forEach(item => {
    item.value = mergedArray.includes(item)
  })
}

const currentTab = ref(0)
const tabItemContent = 'Candy canes donut chupa chups candy canes lemon drops oat cake wafer. Cotton candy candy canes marzipan carrot cake. Sesame snaps lemon drops candy marzipan donut brownie tootsie roll. Icing croissant bonbon biscuit gummi bears. Pudding candy canes sugar plum cookie chocolate cake powder croissant.'

const temporary = ref(true)
if(operType.value == 2){
  temporary.value = false
}



const dynamicStyles = reactive({
  position: '',
  transition: 'all 0.5s ease',
})

const defaultStyles = () => {
  dynamicStyles.position = operType.value == 2 ? '' : 'fixed'
}

const showSettingDialog = () => {
  if(dynamicStyles.position == ''){
    dynamicStyles.position = 'fixed'
  }else{
    dynamicStyles.position = ''
  }
}

const updateNodeData = (data) => {
  // 子组件方法的逻辑
  if(data && data.properties){
    const item = data.properties
    componentId.value = item.componentId
    componentName.value = item.componentName
    type.value = item.type
    script.value = item.script
    language.value = item.language
    clazz.value = item.clazz
    fallbackId.value = item.fallbackId
    cmpPre.value = item.cmpPre
    cmpFinallyOpt.value = item.cmpFinallyOpt
    cmpId.value = item.cmpId
    cmpTag.value = item.cmpTag
    cmpMaxWaitSeconds.value = item.cmpMaxWaitSeconds
    cmpTos.value = item.cmpTos
    cmpDefaultOpt.value = item.cmpDefaultOpt
    cmpTrueOpt.value = item.cmpTrueOpt
    cmpFalseOpt.value = item.cmpFalseOpt
    cmpParallel.value = item.cmpParallel
    cmpDoOpt.value = item.cmpDoOpt
    cmpBreakOpt.value = item.cmpBreakOpt
    cmpDataName.value = item.cmpDataName
    cmpData.value = item.cmpData
    changeType(item.type)
  }
  
};

defineExpose({
  updateNodeData
});
</script>

<template>
  <VNavigationDrawer
    temporary
    style="inline-size: 800px;"
    :style="dynamicStyles"
    location="end"
    class="scrollable-content"
    :model-value="props.isDrawerOpen"
    @update:model-value="handleDrawerModelValueUpdate"
  >
    <!-- 👉 Title -->
    <!-- <AppDrawerHeaderSection
      :title="title"
      @cancel="closeNavigationDrawer"
    /> -->

    <div class="pa-2 d-flex align-center">
      <h5 class="text-h5">
        {{ title }}
      </h5>
      <VSpacer />

      <IconBtn
        variant="tonal"
        class="rounded"
        size="32"
        @click="showSettingDialog"
        style="margin-inline-end: 8px;"
      >
        <VIcon
          size="18"
          icon="tabler-window-maximize"
        />
      </IconBtn>

      <IconBtn
        variant="tonal"
        class="rounded"
        size="32"
        @click="closeNavigationDrawer"
      >
        <VIcon
          size="18"
          icon="tabler-x"
        />
      </IconBtn>
    </div>

    <VDivider />

    <VTabs
      v-model="currentTab"
      class="v-tabs-pill ivy-cmp-edit-tabs"
    >
      <VTab>组件属性</VTab>
      <VTab>组件设置</VTab>
      <VTab>组件参数</VTab>
    </VTabs>

    <VCard class="ivy-cmp-edit-card" style="overflow-y: scroll;">
      <VCardText>
        <VForm
          ref="refForm"
          v-model="isFormValid"
          @submit.prevent="onSubmit"
        >
          <VWindow
            v-model="currentTab"
            class="ivy-cmp-edit-window"
          >
            <VWindowItem
              :key="0"
              class="ivy-cmp-edit-window-item"
            >
              <VRow>
                <VCol cols="12">
                  <VAutocomplete
                    v-model="id"
                    class="setting-mb-12"
                    variant="outlined"
                    label="请选择组件模板..."
                    :items="cmpItems"
                    item-title="componentName"
                    item-value="id"
                    clearable
                  />
                </VCol>
                <VCol cols="12">
                  <VTextField
                    v-model="componentId"
                    :rules="[requiredValidator]"
                    class="setting-mb-12"
                    label="组件ID"
                    clearable
                  />
                </VCol>

                <VCol cols="12">
                  <VTextField
                    v-model="componentName"
                    :rules="[requiredValidator]"
                    class="setting-mb-12"
                    label="组件名称"
                    clearable
                  />
                </VCol>

                <VCol
                  v-show="cmpIdShow"
                  cols="12"
                >
                  <VTextField
                    v-model="cmpId"
                    class="setting-mb-12"
                    label="id"
                    clearable
                  />
                </VCol>

                <VCol
                  v-show="cmpTagShow"
                  cols="12"
                >
                  <VTextField
                    v-model="cmpTag"
                    class="setting-mb-12"
                    label="tag"
                    clearable
                  />
                </VCol>

                <VCol
                  v-show="cmpMaxWaitSecondsShow"
                  cols="12"
                >
                  <VTextField
                    v-model="cmpMaxWaitSeconds"
                    class="setting-mb-12"
                    label="超时时间(秒)"
                    clearable
                  />
                </VCol>

                <VCol
                  v-show="cmpPreShow"
                  cols="12"
                >
                  <VAutocomplete
                    v-model="cmpPre"
                    :items="cmpList"
                    class="setting-mb-12"
                    label="前置组件"
                    clearable
                  />
                </VCol>

                <VCol
                  v-show="cmpFinallyOptShow"
                  cols="12"
                >
                  <VAutocomplete
                    v-model="cmpFinallyOpt"
                    :items="cmpList"
                    class="setting-mb-12"
                    label="后置组件"
                    clearable
                  />
                </VCol>
              </VRow>
            </VWindowItem>
            <VWindowItem
              :key="1"
              class="ivy-cmp-edit-window-item"
            >
              <VRow>
                <VCol cols="12">
                  <VAutocomplete
                    v-model="type"
                    label="组件类型"
                    :rules="[requiredValidator]"
                    :items="nodeTypeList"
                    clearable
                  />
                </VCol>

                <VCol
                  v-show="clazzShow"
                  cols="12"
                >
                  <VAutocomplete
                    v-model="clazz"
                    class="setting-mb-12"
                    label="spring bean或动态类"
                    :items="clazzList"
                    clearable
                  />
                </VCol>

                <VCol
                  v-show="fallbackIdShow"
                  cols="12"
                >
                  <VAutocomplete
                    v-model="fallbackId"
                    label="选择降级组件"
                    :items="fallbackList"
                    item-title="componentName"
                    item-value="id"
                    clearable
                  />
                </VCol>

                <VCol
                  v-show="languageShow"
                  cols="12"
                >
                  <VAutocomplete
                    v-model="language"
                    label="脚本语言"
                    :items="scriptTypeList"
                    clearable
                  />
                </VCol>

                <VCol
                  v-show="scriptShow"
                  cols="12"
                >
                  <Codemirror
                    ref="cmRef"
                    v-model:value="script"
                    :options="cmOptions"
                    border
                    height="300"
                    width="100%"
                    @change="onChange"
                    @input="onInput"
                    @ready="onReady"
                  />
                </VCol>

            

                <VCol
                  v-show="cmpTosShow"
                  cols="12"
                >
                  <VAutocomplete
                    v-model="cmpTos"
                    multiple
                    :items="cmpList"
                    class="setting-mb-12"
                    label="to"
                    clearable
                  />
                </VCol>

                <VCol
                  v-show="cmpDefaultOptShow"
                  cols="12"
                >
                  <VAutocomplete
                    v-model="cmpDefaultOpt"
                    :items="cmpList"
                    class="setting-mb-12"
                    label="defaultOpt"
                    clearable
                  />
                </VCol>

                <VCol
                  v-show="cmpTrueOptShow"
                  cols="12"
                >
                  <VAutocomplete
                    v-model="cmpTrueOpt"
                    :items="cmpList"
                    class="setting-mb-12"
                    label="trueOpt"
                    clearable
                  />
                </VCol>

                <VCol
                  v-show="cmpFalseOptShow"
                  cols="12"
                >
                  <VAutocomplete
                    v-model="cmpFalseOpt"
                    :items="cmpList"
                    class="setting-mb-12"
                    label="falseOpt"
                    clearable
                  />
                </VCol>

                <VCol
                  v-show="cmpParallelShow"
                  cols="12"
                >
                  <VCheckbox
                    v-model="cmpParallel"
                    label="是否开启异步循环parallel"
                  />
                </VCol>

                <VCol
                  v-show="cmpDoOptShow"
                  cols="12"
                >
                  <VAutocomplete
                    v-model="cmpDoOpt"
                    :items="cmpList"
                    class="setting-mb-12"
                    label="doOpt"
                    clearable
                  />
                </VCol>

                <VCol
                  v-show="cmpBreakOptShow"
                  cols="12"
                >
                  <VAutocomplete
                    v-model="cmpBreakOpt"
                    :items="cmpList"
                    class="setting-mb-12"
                    label="breakOpt"
                    clearable
                  />
                </VCol>
              </VRow>
            </VWindowItem>
            <VWindowItem
              :key="2"
              class="ivy-cmp-edit-window-item"
            >
              <VRow>
                <VCol cols="12">
                  <VAutocomplete
                    v-model="paramType"
                    :items="paramList"
                    class="setting-mb-12"
                    label="参数类型"
                    item-title="title"
                    item-value="value"
                    clearable
                  />
                </VCol>

                <VCol
                  v-show="cmpDataNameShow"
                  cols="12"
                >
                  <VTextField
                    v-model="cmpDataName"
                    class="setting-mb-12"
                    label="组件参数名称(dataName)"
                    clearable
                  />
                </VCol>

                <VCol
                  v-show="cmpDataShow"
                  cols="12"
                >
                  <VTextarea
                    v-model="cmpData"
                    class="setting-mb-12"
                    label="组件参数数据"
                    :hint="cmpDataHint"
                    clearable
                    counter
                    auto-grow
                    rows="5"
                    row-height="30"
                  />
                </VCol>
              </VRow>
            </VWindowItem>
          </VWindow>

          <VRow v-if="operType != 2">
            <VCol cols="6">
              <VBtn
                type="submit"
                class="me-3 w-100"
              >
                提交
              </VBtn>
            </VCol>
            <VCol cols="6">
              <VBtn
                class="w-100"
                type="reset"
                variant="tonal"
                color="secondary"
                @click="closeNavigationDrawer"
              >
                取消
              </VBtn>
            </VCol>
          </VRow>
        </VForm>
      </VCardText>
    </VCard>
  </VNavigationDrawer>
</template>

<style scoped>
.w-100 {
  inline-size: 100%;
}

.ivy-cmp-edit-tabs {
  margin: 0 !important;
}

.ivy-cmp-edit-card {
  block-size: 100% !important;
}

/* .ivy-cmp-edit-window-item {
  margin-block-start: 24px !important;
} */

.ivy-cmp-edit-window {
  margin-block-end: 24px !important;
}

.ivy-cmp-edit-window-item .v-row .v-col {
  padding-block-start: 24px;
}
</style>
